<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>修改头像</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        .clipPhoto{
            position:fixed;
            bottom:0;
            left:0;
            width:100%;
            background:rgba(0,0,0,0.8);
        }
        .clipPhoto div{
            float:left;
            width:50%;
            height:1rem;
            line-height:1rem;
            color:#FFF;
            font-size:0.31rem;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="clipPhoto clearfix" :style="{'padding-bottom':(api.safeArea.bottom + 'px')}">
            <div @click="onCancel">取消</div>
            <div @click="changeAvatar">完成</div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var FNImageClip = api.require('FNImageClip');
            var trans = api.require('trans');
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    avatar: null,
                },
                methods:{
                    onCancel: function(){
                        FNImageClip.close();
                        api.closeWin();
                    },
                    changeAvatar: function(){
                        var _this = this;
                        FNImageClip.save({
                            destPath: 'fs://imageClip/avatar.png',
                            copyToAlbum: false,
                            quality: 1
                        }, function(ret, err) {
                            if (ret) {
                                _this.avatar = ret.destPath;
                                _this.uploadAvatar();
                            }
                        });
                        
                    },
                    uploadAvatar: function(){
                        var _this = this;
                        var avatar = this.avatar;
                        var bid = $.createBidFn(CONFIG.constants.AVATAR);
                        $.ajax({
                            url: '/file/upload',
                            method: 'post',
                            load: true,
                            data: {
                                files: {
                                    file: avatar,
                                },
                                values: {
                                    bid: bid
                                }
                            },
                            success: function(res){
								$.toast(res.message);
                                FNImageClip.close();
								api.sendEvent({
								    name: 'updateSettingsPage',
								});
								api.sendEvent({
								    name: 'updateMyIndexPage'
								});
								
                                api.closeWin();
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
                    },
                },
                mounted(){
					$.initJs(this);                    
					var dWidth = document.documentElement.clientWidth;
					var px = dWidth * 100 / 750;
                    if(api.pageParam.data.srcPath){
                        FNImageClip.open({
                            srcPath:api.pageParam.data.srcPath,
                            rect: {
                                x: 0,
                                y: 0,
                                w: api.winWidth,
                                h: api.winHeight - px - api.safeArea.bottom
                            },
                            isHideGrid:false,
                            style: {
                                mask: 'rgba(0,0,0,0.3)',
                                clip: {
                                    w: api.winWidth * 0.7,
                                    h: api.winWidth * 0.7,
                                    x: api.winWidth * 0.3 / 2,
                                    y: ( api.winHeight - px - api.safeArea.bottom - (api.winWidth * 0.7)) / 2,
                                    appearance: 'rectangle'
                                }
                            },
                            mode:"image",
                        }, function(ret, err) {
                            if (!ret) {
                                $.toast("裁剪组件打开失败");
                            }
                        });
                    }
                }
            });
        }
    </script>
</body>
</html>
